<template>

    <!-- :replaceBg="replaceBg" -->
<PanelRander
    ref="panelRander"
    :id="id" 
    :type="type"
    :isShow="isShow"
    :title="title" 
    :bgClass='bgClass'
    v-slot="{id, type, isShow, title, bgClass, fnClosePanel, fnShrinkPanel}">
    <div class="cmp-panel-wrap">    
        <div class="cmp-panel-shrink cmp-panel-shrink--open" v-if="type===2 && !isShow" @click="fnShrinkPanel"></div>
        <div v-if="isShow" style="height:100%" >
            <!-- <div class="cmp-panel-cnt" :style="replaceBg" > -->
                <div class="cmp-panel-cnt" :class="bgClass">
                <div class="cmp-panel-cnt-hd">
                    <div class="cmp-panel-cnt-tool"> 
                        <span  v-if="type===1" @click="fnClosePanel" class="cmp-panel-btn cmp-panel-close">X</span>
                        <span class="cmp-panel-btn cmp-panel-shrink cmp-panel-shrink--close" style="" v-if="type===2" @click="fnShrinkPanel"></span>
                    </div>
                    <div class="cmp-panel-cnt-title"><span class="cmp-panel-cnt-title_t">{{title}}</span></div>
                </div>
                <div class="cmp-panel-cnt-bd">
                    <slot></slot>
                </div>
            </div>
        </div>        
    </div>    
</PanelRander>
</template>
<script lang="ts">
import {Component, Vue, Prop} from 'vue-property-decorator';
import PanelRander from '@/components/common/panel/PanelRander.vue';
@Component({
    name: 'PanelView',
    components: {
        PanelRander,
    },
})
export default class PanelView extends Vue {
    /**面板属性
     * @type:   type：number; 0(无关闭无收缩)|1（带关闭按钮的面板）|2（带收缩按钮的面板）
     * @isShow: type: boolean; dis: 面板的显示状态;
     * @title:  type: String ;窗口的标题；
     */
   // @Prop() private originData!: IPanelData;
    @Prop()  private id?: string;
    @Prop({default: 0})  private type?: number;
    @Prop({default: true}) private isShow?: boolean;
    @Prop()  private title!: string;
    @Prop({ default: ''}) private replaceBg?: string;
    @Prop() private bgClass?: string;
   /* @Prop() private randerData: any;*/
    public openPanel() {
         (this.$refs as any).panelRander.fnOpenPanel();
    }

}
</script>
<style lang="less" scoped>
@import url('../../../assets/css/PanelView.less');
</style>